<template>
  <div class="access-permission-container">
    <div class="page-header">
      <div class="title">访问权限设置</div>
      <div class="subtitle">精细化权限控制管理</div>
    </div>

    <div class="route-info">
      <a-breadcrumb>
        <a-breadcrumb-item
          ><router-link to="/files"><FolderOutlined />档案文件管理</router-link></a-breadcrumb-item
        >
        <a-breadcrumb-item
          ><router-link to="/files/electronic-archive"><LaptopOutlined />电子档案管理</router-link></a-breadcrumb-item
        >
        <a-breadcrumb-item><LockOutlined />{{ $route.meta.title }}</a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <div class="stats-section">
      <a-row :gutter="[16, 16]">
        <a-col :span="6">
          <div class="stat-card">
            <TeamOutlined class="stat-icon" />
            <div>
              <div class="stat-title">用户总数</div>
              <div class="stat-value">{{ stats.users }}</div>
            </div>
          </div>
        </a-col>
        <a-col :span="6">
          <div class="stat-card">
            <UsergroupAddOutlined class="stat-icon" />
            <div>
              <div class="stat-title">权限组</div>
              <div class="stat-value">{{ stats.groups }}</div>
            </div>
          </div>
        </a-col>
        <a-col :span="6">
          <div class="stat-card">
            <SafetyCertificateOutlined class="stat-icon" />
            <div>
              <div class="stat-title">角色数量</div>
              <div class="stat-value">{{ stats.roles }}</div>
            </div>
          </div>
        </a-col>
        <a-col :span="6">
          <div class="stat-card">
            <AuditOutlined class="stat-icon" />
            <div>
              <div class="stat-title">今日访问</div>
              <div class="stat-value">{{ stats.todayAccess }}</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <div class="permission-management">
      <a-row :gutter="[24, 24]">
        <a-col :span="8">
          <a-card title="用户管理" :bordered="false">
            <div class="user-actions">
              <a-button type="primary" size="small"><PlusOutlined />添加用户</a-button>
            </div>
            <a-list :data-source="users" size="small">
              <template #renderItem="{ item }">
                <a-list-item>
                  <a-list-item-meta>
                    <template #avatar>
                      <a-avatar>{{ item.name[0] }}</a-avatar>
                    </template>
                    <template #title>{{ item.name }}</template>
                    <template #description>{{ item.role }}</template>
                  </a-list-item-meta>
                </a-list-item>
              </template>
            </a-list>
          </a-card>
        </a-col>

        <a-col :span="8">
          <a-card title="权限组" :bordered="false">
            <div class="group-actions">
              <a-button type="primary" size="small"><PlusOutlined />创建组</a-button>
            </div>
            <div class="permission-groups">
              <div v-for="group in permissionGroups" :key="group.id" class="group-item">
                <div class="group-name">{{ group.name }}</div>
                <div class="group-count">{{ group.memberCount }}人</div>
              </div>
            </div>
          </a-card>
        </a-col>

        <a-col :span="8">
          <a-card title="权限矩阵" :bordered="false">
            <a-table :columns="permissionColumns" :data-source="permissions" size="small" :pagination="false">
              <template #bodyCell="{ column, record }">
                <template v-if="column.key !== 'module'">
                  <a-checkbox :checked="record[column.key]" />
                </template>
              </template>
            </a-table>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <div class="access-log">
      <a-card title="访问日志" :bordered="false">
        <a-table :columns="logColumns" :data-source="accessLogs" :pagination="{ pageSize: 10 }">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'result'">
              <a-tag :color="record.result === '成功' ? 'green' : 'red'">{{ record.result }}</a-tag>
            </template>
          </template>
        </a-table>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { HomeOutlined, FolderOutlined, LaptopOutlined, LockOutlined, TeamOutlined, UsergroupAddOutlined, SafetyCertificateOutlined, AuditOutlined, PlusOutlined } from '@ant-design/icons-vue'

const stats = reactive({
  users: 8888,
  groups: 45,
  roles: 12,
  todayAccess: 1247
})

const users = ref([
  { id: 1, name: '李时珍', role: '档案管理员' },
  { id: 2, name: '王守仁', role: '系统管理员' },
  { id: 3, name: '苏东坡', role: '档案查阅员' }
])

const permissionGroups = ref([
  { id: 1, name: '超级管理员', memberCount: 3 },
  { id: 2, name: '档案管理员', memberCount: 25 },
  { id: 3, name: '查阅员', memberCount: 156 }
])

const permissionColumns = [
  { title: '模块', dataIndex: 'module', key: 'module' },
  { title: '查看', key: 'read' },
  { title: '编辑', key: 'write' },
  { title: '删除', key: 'delete' }
]

const permissions = ref([
  { module: '生死记录', read: true, write: true, delete: false },
  { module: '业力档案', read: true, write: false, delete: false }
])

const logColumns = [
  { title: '用户', dataIndex: 'user', key: 'user' },
  { title: '操作', dataIndex: 'action', key: 'action' },
  { title: '资源', dataIndex: 'resource', key: 'resource' },
  { title: '时间', dataIndex: 'time', key: 'time' },
  { title: '结果', key: 'result' }
]

const accessLogs = ref([
  { user: '李时珍', action: '查看', resource: '生死簿第123页', time: '2023-12-01 10:30:00', result: '成功' },
  { user: '王守仁', action: '编辑', resource: '业力评定表', time: '2023-12-01 10:25:00', result: '成功' }
])
</script>

<style lang="scss" scoped>
.access-permission-container {
  padding: 24px;

  .page-header {
    text-align: center;
    margin-bottom: 24px;

    .title {
      font-size: 28px;
      font-weight: bold;
      color: $secondary-color;
      margin-bottom: 8px;
    }

    .subtitle {
      font-size: 14px;
      color: $text-secondary;
    }
  }

  .route-info {
    margin-bottom: 24px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid rgba(212, 153, 10, 0.2);
  }

  .stats-section,
  .permission-management,
  .access-log {
    margin-bottom: 24px;

    .stat-card {
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      display: flex;
      align-items: center;
      gap: 12px;

      .stat-icon {
        font-size: 32px;
        color: $secondary-color;
      }

      .stat-title {
        font-size: 14px;
        color: $text-secondary;
        margin-bottom: 4px;
      }

      .stat-value {
        font-size: 24px;
        font-weight: bold;
        color: $primary-color;
      }
    }

    :deep(.ant-card) {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      border-radius: 12px;
    }
  }

  .user-actions,
  .group-actions {
    margin-bottom: 16px;
  }

  .permission-groups {
    .group-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 12px;
      margin-bottom: 8px;
      border-radius: 6px;

      .group-name {
        font-weight: bold;
        color: $primary-color;
      }

      .group-count {
        font-size: 12px;
        color: $text-secondary;
      }
    }
  }
}
</style>
